<template>
	<div class="container">
		<van-cell-group :border="false">
			 <van-field
			    v-model="infoForm.shortName"
			    clearable
			    placeholder="标题"
			  />
			<van-field  v-model="infoForm.shortDesc" rows="2" autosize type="textarea" maxlength="200" placeholder="写一句话介绍下你的视频吧…"
			 show-word-limit />
		</van-cell-group>
		<!-- <div class="header-video w100" v-if="infoForm.shortUrl">
			<video :src="infoForm.shortUrl" controls="controls" class="w100" autoplay="autoplay"></video>
		</div> -->
		<van-uploader accept="*" :max-count="1" :before-read="beforeRead" :after-read="afterRead" v-model="videoFileList" :before-delete="beforeDelete">
			<div class="video-upload" v-if="!infoForm.shortUrl">
				<i class="iconfont iconshipin"></i>
			</div>
			<!-- <van-button icon="photo" type="primary"  class="reUploadBtn" v-else >重新上传</van-button> -->
		</van-uploader>
		<div class="up-btn">
			<van-button type="primary" size="large" color="linear-gradient(90deg,rgba(255,93,106,1) 0%,rgba(255,140,86,1) 100%)" @click="setShortSaveFun">提交</van-button>
		</div>
		<van-overlay :show="dialogVisible">
			<div class="wrapper" @click.stop>
				<div class="van-dialog">
					<div class="van-dialog__header">提示</div>
					<div class="van-dialog__content txt-c">
						<van-circle v-model="videoPercentage" :rate="0" :speed="100" :text="text" layer-color="#ebedf0" v-if="!change_video_status" class="mt10 videoPercentageCss"/>
						<div v-if="!change_video_status" class="van-dialog__message van-dialog__message--has-title pb0">文件上传中...</div>
						<div v-else class="van-dialog__message van-dialog__message--has-title pb0">服务器转码中...</div>
						<div class="van-dialog__message van-dialog__message--has-title">请耐心等待</div>
					</div>
					<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons">
						<div @click="closeUpload" class="van-button van-button--default van-button--large van-dialog__cancel">取 消</div>
					</div>
				</div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
	import {
		Field,
		Uploader,
		Button,
		CellGroup,
		Dialog,
		Toast,
		Overlay,
		Circle,
		Notify
	} from 'vant';
	import {
		getVideoToken,
		setVideoPfop,
		getVideoPfopStatus,
		setShortSave
	} from '@/api/permission'
	import uploadFun from '@/assets/js/qiniu'
	export default {
		components: {
			[Field.name]: Field,
			[Uploader.name]: Uploader,
			[Button.name]: Button,
			[CellGroup.name]: CellGroup,
			[Dialog.name]: Dialog,
			[Overlay.name]: Overlay,
			[Circle.name]: Circle,
			[Notify.name]:Notify
		},

		data() {
			return {
				infoForm:{
					 shortName:'',
					 shortDesc:'',
					 shortUrl:''
				},
				videoFileList:[],
				timer: null,
				videoPercentage: 0,
				dialogVisible: false,
				change_video_status: false,
				subscription: null, //上传对象
				pending:false
			};
		},

		computed: {
			text() {
				return this.videoPercentage.toFixed(0) + '%'
			}
		},

		methods: {
			beforeRead(file) {
				var videoType = ["avi", "wmv", "mkv", "mp4", "mov", "rm", "3gp", "flv", "mpg", "rmvb","quicktime"];
				// alert(file.type)
				if (RegExp("\.(" + videoType.join("|") + ")$", "i").test(file.type.toLowerCase())) {
					var video = document.createElement('video');
					video.src =  URL.createObjectURL(file);
					// if(Math.ceil(file.size/1024)>5){
					// 	Toast('请上传小于5M视频文件');
						// return false
					// }
					return true;
				} else {
					Toast('请上传视频文件');
					return false;
				}
			},
			afterRead(files) {
				let self = this
				var video = document.createElement('video');
					video.src =  URL.createObjectURL(files.file);
				video.onloadedmetadata = function() {
				    var duration = video.duration;
				    if(duration>300){
				    	self.closeUpload()
				    	Toast('请上传小于5分钟视频文件');
				    }else{
						self.uploadFiles(files)
				    }
				}
			},
			beforeDelete(){
				// self.infoForm.shortUrl = ''
				this.closeUpload()
			},
			uploadFiles(files) {
				let self = this
				let observer = {
					next(res) {
						self.videoPercentage = parseInt(res.total.percent)
						console.log(self.videoPercentage)
					},
					error(err) {
						// ...
					},
					complete(res) {
						if (res.key) {
							setVideoPfop({
								key: res.key
							}).then(res => {
								self.change_video_status = true
								self.timer = setInterval(() => {
									getVideoPfopStatus({
										id: res.persistentId
									}).then(res => {
										if (res[0].status.code == 0) {
											clearInterval(self.timer)
											self.dialogVisible = false
											self.change_video_status = false
											self.infoForm.shortUrl = res[0].url
										}
									})
								}, 1000)
							})
						}
					}
				}
				self.dialogVisible = true
				self.subscription = uploadFun(self.$store.state.videoToken, files.file, observer)
			},
			closeUpload() {
				let self = this
				self.change_video_show = false
				self.dialogVisible = false
				self.change_video_status = false
				self.videoFileList = []
				if (self.subscription) {
					self.subscription.unsubscribe()
				}
				clearInterval(self.timer);
			},
			setShortSaveFun(){
				 let self = this
				 if(!self.infoForm.shortName){
					 Toast('请填写标题');
					 return false
				 }
				 if(!self.infoForm.shortUrl){
					 Toast('请上传视频文件');
					 return false
				 }
				 if(self.pending){
					 Toast('请勿重复提交');
					 return false
				 }
				setShortSave(self.infoForm).then(res=>{
					self.pending = false
					Notify({ type: 'success', message: '提交成功',onClose:()=>{
						self.$router.go(-1)
					}});
				}).catch(res=>{
					self.pending = false
				})
			}
		},
		mounted() {
			let self = this 
			getVideoToken().then(res => {
			   self.$store.commit('SET_VIDEOTOKEN', res.token)
			})
		},
		beforeDestroy() {
			clearInterval(self.timer);
		}
	};
</script>

<style lang="less">
	.container {
		height: 100%;
		background-color: #FFFFFF;
	}

	.video-upload {
		margin-left: 15px;
		height: 103px;
		width: 103px;
		background-color: #F6F7F9FF;
		text-align: center;
		border-radius: 6px;

		.iconfont {
			font-size: 45px;
			color: #000000;
			line-height: 103px;
		}
	}

	.van-field__control {
		font-size: 18px;
		line-height: 25px;
	}

	.up-btn {
		padding-top: 35px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.videoPercentageCss {
		margin: auto;
		margin-top:20px;
	}
	.pb0{
		padding-bottom: 0;
	}
	.header-video{
		overflow: hidden;
		height: 205px;
	}
	.reUploadBtn{
		margin-top: 15px;
		margin-left: 15px;	
	}
	.van-uploader__preview{
		margin-left: 15px;
		.van-icon-clear{
			color:#FF5D6A;
		}
	}
</style>
